import React, { Component } from 'react'
import './index.css'
import { Layout, Space, Button, Input, List } from 'antd'
const { Header, Footer, Content } = Layout;


export default class Todo extends Component {

	headerStyle = {
		textAlign: 'center',
		height: 64,
		paddingInline: 48,
		lineHeight: '64px',
		backgroundColor: 'pink',
	};
	contentStyle = {
		textAlign: 'center',
		minHeight: 320,
		lineHeight: '120px',
		color: '#fff',
		backgroundColor: 'skyblue',
	};
	footerStyle = {
		textAlign: 'center',
		color: '#fff',
		backgroundColor: 'gray',
	};
	layoutStyle = {
		borderRadius: 8,
		overflow: 'hidden',
		width: '100%',
	};

	
	state = {data: [
		'吃饭', '睡觉', '打游戏'
	],
	inputValue: ''}

	inputRef = React.createRef();

	add = () => {
		this.setState({
			data: [...this.state.data, this.state.inputValue]
		})
		this.setState({inputValue: ''})
	}

	deleteItem = function(item) {
		console.log('delete', item)
		this.setState({
			data: this.state.data.filter(v => v !== item)
		})
	}

	changeInputValue = (e) => {
		this.setState({inputValue: e.target.value})
	}

	render() {
		console.log('render')
		return (
			<div className='todo'>
				<Layout style={this.layoutStyle}>
					<Header style={this.headerStyle}>
						<Space.Compact style={{ width: '100%' }}>
							<Input value={this.state.inputValue} onChange={this.changeInputValue} placeholder='请输入一个代办事项' />
							<Button  onClick={this.add} type="primary">添加</Button>
						</Space.Compact>
					</Header>
					<Content style={this.contentStyle}>
					<List
						bordered
						dataSource={this.state.data}
						renderItem={item => (
							<List.Item>
								{item}
								<Button type="danger" onClick={() => this.deleteItem(item)} style={{float: 'right'}}>删除</Button>
							</List.Item>
						)}
					/>
					</Content>
					<Footer style={this.footerStyle}>
						总共有{this.state.data.length}条代办事项
					</Footer>
				</Layout>
			</div>
		)
	}
}
